<template>
	<view class="hot-list">
		<view class="title">
			热门推荐
		</view>
		<view class="swiper-holder">
			<swiper class="swiper" :autoplay="true" :duration="2000" :interval="2000" :circular="true" :display-multiple-items="3">
				<swiper-item v-for="item in dataList" :key="item.id">
					<view class="swiper-item"  @tap="toGoodsInfo(item.id)">
						<image :src="item.pic" mode=""></image>
						<view class="name">
							{{item.name}}
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		props:["dataList"],
		methods: {
			toGoodsInfo(id){
				uni.navigateTo({
					url: `/pages/goodsInfo/goodsInfo?goodsId=${id}`,
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.hot-list {
		box-sizing: border-box;
		padding: 30rpx;
		width: 100%;

		.title {
			padding: 30rpx 0;
			font-size: 32rpx;
			color: 3e3e3e;
			font-weight: 600;
		}

		.swiper-holder {
			.swiper {
				height: 300rpx;
				width: 100%;

				.swiper-item {
					width:100%;
					height:100%;
					image {
						width: 208rpx;
						height: 176rpx;
					}
					.name{
						margin-top: 20rpx;
						width: 100%;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}
				}
			}
		}
	}
</style>
